<template>
  <div class="teams-page">
    <!-- 顶部横幅 -->
    <div class="teams-banner">
      <div class="banner-content">
        <h1>志愿者团队</h1>
        <p>凝聚每一份力量，守护海洋生态</p>
        <div class="stats-cards">
          <div class="stat-card">
            <div class="stat-icon">
              <el-icon :size="32"><User /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ totalMembers }}</div>
              <div class="stat-label">注册志愿者</div>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">
              <el-icon :size="32"><Flag /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ totalTeams }}</div>
              <div class="stat-label">活跃团队</div>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">
              <el-icon :size="32"><Timer /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ totalHours.toLocaleString() }}</div>
              <div class="stat-label">服务时长</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索和筛选区 -->
    <div class="filter-section">
      <div class="filter-container">
        <div class="search-box">
          <el-input
            v-model="searchQuery"
            placeholder="搜索团队名称或描述..."
            prefix-icon="Search"
            clearable
            class="search-input"
          >
            <template #append>
              <el-button type="primary">搜索</el-button>
            </template>
          </el-input>
        </div>

        <div class="filter-options">
          <div class="region-filter">
            <el-radio-group v-model="activeRegion" size="large">
              <el-radio-button label="all">全部地区</el-radio-button>
              <el-radio-button label="north">华北地区</el-radio-button>
              <el-radio-button label="south">华南地区</el-radio-button>
              <el-radio-button label="east">华东地区</el-radio-button>
            </el-radio-group>
          </div>

          <div class="sort-filter">
            <el-select v-model="sortBy" placeholder="排序方式" class="sort-select">
              <el-option label="最新成立" value="established">
                <template #default="{ label }">
                  <el-icon><Calendar /></el-icon>
                  <span>{{ label }}</span>
                </template>
              </el-option>
              <el-option label="成员最多" value="members">
                <template #default="{ label }">
                  <el-icon><User /></el-icon>
                  <span>{{ label }}</span>
                </template>
              </el-option>
              <el-option label="活动最多" value="activities">
                <template #default="{ label }">
                  <el-icon><List /></el-icon>
                  <span>{{ label }}</span>
                </template>
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>

    <!-- 团队列表 -->
    <div class="teams-container">
      <el-row :gutter="30">
        <el-col v-for="team in filteredTeams" 
                :key="team.id" 
                :xs="24" 
                :sm="12" 
                :lg="8" 
                class="team-col">
          <div class="team-card" @click="viewTeamDetail(team.id)">
            <div class="team-header">
              <div class="team-avatar">
                <el-image :src="team.avatar" fit="cover">
                  <template #placeholder>
                    <div class="image-placeholder">
                      <el-icon><Picture /></el-icon>
                    </div>
                  </template>
                </el-image>
              </div>
              <div class="team-badges">
                <el-tag v-if="team.isRecruiting" type="success" effect="dark" size="small">
                  招募中
                </el-tag>
                <el-tag v-if="team.isVerified" type="primary" effect="dark" size="small">
                  官方认证
                </el-tag>
              </div>
            </div>
            
            <div class="team-content">
              <h3 class="team-name">{{ team.name }}</h3>
              <p class="team-desc">{{ team.description }}</p>
              
              <div class="team-stats">
                <div class="stat-item">
                  <div class="stat-value">{{ team.memberCount }}</div>
                  <div class="stat-label">成员</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">{{ team.activityCount }}</div>
                  <div class="stat-label">活动</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">{{ team.serviceHours }}</div>
                  <div class="stat-label">时长</div>
                </div>
              </div>

              <div class="team-info">
                <div class="info-item">
                  <el-icon><Location /></el-icon>
                  <span>{{ team.location }}</span>
                </div>
                <div class="info-item">
                  <el-icon><Calendar /></el-icon>
                  <span>{{ formatDate(team.established) }}</span>
                </div>
              </div>

              <div class="team-tags">
                <el-tag 
                  v-for="tag in team.tags" 
                  :key="tag"
                  :type="getTagType(tag)"
                  effect="plain"
                  size="small"
                >
                  {{ tag }}
                </el-tag>
              </div>

              <div class="team-members">
                <div class="members-preview">
                  <el-avatar 
                    v-for="member in team.topMembers.slice(0, 5)" 
                    :key="member.id"
                    :src="member.avatar"
                    :size="32"
                  />
                  <div v-if="team.memberCount > 5" class="more-members">
                    +{{ team.memberCount - 5 }}
                  </div>
                </div>
                <el-button 
                  type="primary" 
                  plain
                  size="small"
                  :icon="team.isJoined ? 'Check' : 'Plus'"
                  :disabled="team.isJoined"
                  @click.stop="handleJoinTeam(team)"
                >
                  {{ team.isJoined ? '已加入' : '加入团队' }}
                </el-button>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 分页器 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="totalTeams"
          :page-sizes="[9, 18, 36]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Search, Location, Calendar, User, Timer, Picture, 
  Flag, Check, Plus, List 
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 状态变量
const searchQuery = ref('')
const activeRegion = ref('all')
const sortBy = ref('established')
const currentPage = ref(1)
const pageSize = ref(9)

// 统计数据
const totalMembers = ref(12580)
const totalTeams = ref(168)
const totalHours = ref(458920)

// 模拟团队数据
const teams = ref([
  {
    id: 1,
    name: '蔚蓝守护者',
    description: '专注于海洋生态保护的专业志愿者团队，致力于海洋环境保护和科研工作。',
    avatar: 'https://images.unsplash.com/photo-1621451537084-482c73073a0f?w=800',
    location: '深圳',
    established: '2023-06-15',
    memberCount: 156,
    activityCount: 48,
    serviceHours: 2160,
    isRecruiting: true,
    isVerified: true,
    isJoined: false,
    tags: ['海洋保护', '科研调查', '环境教育'],
    topMembers: [
      { id: 1, avatar: 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=100' },
      { id: 2, avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100' },
      { id: 3, avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100' },
      { id: 4, avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100' },
      { id: 5, avatar: 'https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=100' }
    ]
  },
  {
    id: 2,
    name: '珊瑚保育小组',
    description: '致力于珊瑚礁生态系统保护和修复的专业团队，开展珊瑚培育和海洋生态修复工作。',
    avatar: 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=800',
    location: '三亚',
    established: '2023-08-20',
    memberCount: 89,
    activityCount: 36,
    serviceHours: 1580,
    isRecruiting: true,
    isVerified: true,
    isJoined: false,
    tags: ['珊瑚保护', '海洋生态', '科研活动'],
    topMembers: [
      { id: 6, avatar: 'https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=100' },
      { id: 7, avatar: 'https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=100' },
      { id: 8, avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100' }
    ]
  },
  {
    id: 3,
    name: '海龟守护联盟',
    description: '专注于海龟救助和保护的志愿者团队，开展海龟救助、康复和放生等工作。',
    avatar: 'https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f?w=800',
    location: '海口',
    established: '2023-09-10',
    memberCount: 112,
    activityCount: 42,
    serviceHours: 1890,
    isRecruiting: false,
    isVerified: true,
    isJoined: false,
    tags: ['海龟保护', '野生动物', '环境教育'],
    topMembers: [
      { id: 9, avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100' },
      { id: 10, avatar: 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=100' },
      { id: 11, avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100' },
      { id: 12, avatar: 'https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=100' }
    ]
  }
])

// 计算属性
const filteredTeams = computed(() => {
  let result = [...teams.value]
  
  // 搜索过滤
  if (searchQuery.value) {
    result = result.filter(team => 
      team.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      team.description.toLowerCase().includes(searchQuery.value.toLowerCase())
    )
  }
  
  // 地区过滤
  if (activeRegion.value !== 'all') {
    // 这里可以根据实际需求添加地区过滤逻辑
  }
  
  // 排序
  switch (sortBy.value) {
    case 'members':
      result.sort((a, b) => b.memberCount - a.memberCount)
      break
    case 'activities':
      result.sort((a, b) => b.activityCount - a.activityCount)
      break
    default:
      result.sort((a, b) => new Date(b.established) - new Date(a.established))
  }
  
  return result
})

// 方法
const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN', { 
    year: 'numeric', 
    month: 'long', 
    day: 'numeric' 
  })
}

const getTagType = (tag) => {
  const tagTypes = {
    '海洋保护': 'primary',
    '科研调查': 'warning',
    '环境教育': 'success',
    '珊瑚保护': 'danger',
    '海龟保护': 'info'
  }
  return tagTypes[tag] || ''
}

const handleJoinTeam = (team) => {
  if (!team.isJoined) {
    team.isJoined = true
    team.memberCount++
    ElMessage.success(`已成功加入${team.name}！`)
  }
}

const viewTeamDetail = (teamId) => {
  router.push(`/teams/${teamId}`)
}

const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}
</script>

<style scoped lang="scss">
.teams-page {
  min-height: 100vh;
  background-color: #f5f7fa;

  .teams-banner {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
                url('https://images.unsplash.com/photo-1439405326854-014607f694d7?w=1920') center/cover;
    color: white;
    padding: 60px 0;
    margin-bottom: 40px;
    border-radius: 8px;


    .banner-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      text-align: center;

      h1 {
        font-size: 3em;
        margin-bottom: 20px;
        font-weight: 600;
      }

      p {
        font-size: 1.2em;
        margin-bottom: 40px;
        opacity: 0.9;
      }

      .stats-cards {
        display: flex;
        justify-content: center;
        gap: 30px;
        margin-top: 40px;

        .stat-card {
          background: rgba(255, 255, 255, 0.1);
          backdrop-filter: blur(10px);
          padding: 20px 40px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          gap: 20px;

          .stat-icon {
            background: rgba(255, 255, 255, 0.2);
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .stat-info {
            text-align: left;

            .stat-number {
              font-size: 2em;
              font-weight: 600;
              line-height: 1.2;
            }

            .stat-label {
              font-size: 0.9em;
              opacity: 0.8;
            }
          }
        }
      }
    }
  }

  .filter-section {
    max-width: 1400px;
    margin: 0 auto 30px;
    padding: 0 20px;
    
    .filter-container {
      background: white;
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

      .search-box {
        margin-bottom: 24px;

        .search-input {
          :deep(.el-input__wrapper) {
            box-shadow: 0 0 0 1px #dcdfe6 inset;
            
            &:hover {
              box-shadow: 0 0 0 1px #409EFF inset;
            }
          }

          :deep(.el-input-group__append) {
            .el-button {
              border: none;
              padding: 13px 20px;
            }
          }
        }
      }

      .filter-options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;

        .region-filter {
          flex: 1;

          :deep(.el-radio-group) {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;

            .el-radio-button {
              &:first-child .el-radio-button__inner {
                border-radius: 8px 0 0 8px;
              }
              
              &:last-child .el-radio-button__inner {
                border-radius: 0 8px 8px 0;
              }

              .el-radio-button__inner {
                height: 40px;
                padding: 0 20px;
                display: flex;
                align-items: center;
                transition: all 0.3s;
                
                &:hover {
                  background-color: #ecf5ff;
                }
              }
            }
          }
        }

        .sort-filter {
          .sort-select {
            width: 160px;

            :deep(.el-select-dropdown__item) {
              display: flex;
              align-items: center;
              gap: 8px;
              padding: 8px 12px;

              .el-icon {
                font-size: 16px;
                color: #909399;
              }
            }
          }
        }
      }
    }
  }

  .teams-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 60px;

    .team-col {
      margin-bottom: 30px;
    }

    .team-card {
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
      transition: all 0.3s ease;
      cursor: pointer;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0,0,0,0.1);
      }

      .team-header {
        position: relative;
        height: 140px;
        background: linear-gradient(135deg, #409EFF 0%, #36D1DC 100%);
        
        .team-avatar {
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translate(-50%, 50%);
          width: 100px;
          height: 100px;
          border-radius: 50%;
          overflow: hidden;
          border: 4px solid white;
          box-shadow: 0 4px 12px rgba(0,0,0,0.1);

          .el-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .team-badges {
          position: absolute;
          top: 20px;
          right: 20px;
          display: flex;
          gap: 8px;
          z-index: 1;
        }
      }

      .team-content {
        padding: 60px 24px 24px;

        .team-name {
          font-size: 1.4em;
          font-weight: 600;
          color: #303133;
          margin-bottom: 12px;
          text-align: center;
        }

        .team-desc {
          color: #606266;
          font-size: 14px;
          line-height: 1.6;
          margin-bottom: 20px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-align: center;
          min-height: 44px;
        }

        .team-stats {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 10px;
          margin-bottom: 20px;
          padding: 15px;
          background: #f5f7fa;
          border-radius: 12px;

          .stat-item {
            text-align: center;
            padding: 10px 0;

            .stat-value {
              font-size: 1.4em;
              font-weight: 600;
              color: #409EFF;
              margin-bottom: 4px;
            }

            .stat-label {
              font-size: 0.9em;
              color: #909399;
            }
          }
        }

        .team-info {
          display: flex;
          justify-content: space-between;
          margin-bottom: 20px;
          padding: 0 10px;

          .info-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #606266;
            font-size: 13px;

            .el-icon {
              color: #409EFF;
            }
          }
        }

        .team-tags {
          display: flex;
          gap: 8px;
          flex-wrap: wrap;
          margin-bottom: 20px;
          padding: 0 10px;
          justify-content: center;

          .el-tag {
            border-radius: 12px;
            padding: 0 12px;
          }
        }

        .team-members {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15px;
          background: #f5f7fa;
          border-radius: 12px;
          
          .members-preview {
            display: flex;
            align-items: center;

            .el-avatar {
              margin-right: -12px;
              border: 2px solid white;
              box-shadow: 0 2px 8px rgba(0,0,0,0.1);
              transition: transform 0.3s ease;
              
              &:hover {
                transform: translateY(-2px);
              }
              
              &:last-child {
                margin-right: 0;
              }
            }

            .more-members {
              margin-left: 20px;
              color: #909399;
              font-size: 13px;
              background: white;
              padding: 4px 8px;
              border-radius: 12px;
            }
          }

          .el-button {
            margin-left: 16px;
          }
        }
      }
    }
  }

  .pagination-container {
    margin-top: 40px;
    text-align: center;
  }
}

.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  color: #909399;
}

@media (max-width: 768px) {
  .teams-page {
    .teams-banner {
      padding: 40px 0;

      .banner-content {
        h1 {
          font-size: 2em;
        }

        .stats-cards {
          flex-direction: column;
          gap: 20px;
        }
      }
    }

    .filter-section {
      .filter-container {
        padding: 16px;

        .filter-options {
          flex-direction: column;
          align-items: stretch;

          .region-filter {
            :deep(.el-radio-group) {
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              width: 100%;

              .el-radio-button {
                &:first-child .el-radio-button__inner {
                  border-radius: 8px 0 0 0;
                }
                
                &:nth-child(2) .el-radio-button__inner {
                  border-radius: 0 8px 0 0;
                }
                
                &:nth-last-child(2) .el-radio-button__inner {
                  border-radius: 0 0 0 8px;
                }
                
                &:last-child .el-radio-button__inner {
                  border-radius: 0 0 8px 0;
                }

                .el-radio-button__inner {
                  width: 100%;
                  justify-content: center;
                }
              }
            }
          }

          .sort-filter {
            width: 100%;
            
            .sort-select {
              width: 100%;
            }
          }
        }
      }
    }
  }
}
</style> 